<template>
  <div class="project-management-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>专项项目管理</h2>
        <el-button type="primary" @click="handleAddProject" size="small">新增项目</el-button>
      </div>

      <!-- 项目列表表格 -->
      <el-table
          :data="projectList"
          border
          style="width: 100%"
          row-key="id"
          @row-click="handleRowClick">
        <el-table-column
            prop="name"
            label="项目名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="target"
            label="目标"
            width="100">
        </el-table-column>
        <el-table-column
            prop="principal"
            label="专项主责"
            width="120">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status || '未开始' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="milestone"
            label="里程碑"
            width="150">
        </el-table-column>
        <el-table-column
            prop="priority"
            label="优先级"
            width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.priority === '高' ? 'danger' : 'primary'">
              {{ scope.row.priority }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="结项时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="countdown"
            label="倒计时(天)"
            width="120">
        </el-table-column>
        <el-table-column
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click.stop="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 项目详情对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%">
        <el-form :model="currentProject" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目名称">
                <el-input v-model="currentProject.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目标">
                <el-input v-model="currentProject.target"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="专项主责">
                <el-input v-model="currentProject.principal"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-select v-model="currentProject.status" placeholder="请选择状态">
                  <el-option label="未开始" value="未开始"></el-option>
                  <el-option label="进行中" value="进行中"></el-option>
                  <el-option label="已延期" value="已延期"></el-option>
                  <el-option label="已完成" value="已完成"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="优先级">
                <el-select v-model="currentProject.priority" placeholder="请选择优先级">
                  <el-option label="高" value="高"></el-option>
                  <el-option label="中" value="中"></el-option>
                  <el-option label="低" value="低"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结项时间">
                <el-date-picker
                    v-model="currentProject.endTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="里程碑">
            <el-input
                type="textarea"
                :rows="2"
                v-model="currentProject.milestone">
            </el-input>
          </el-form-item>

          <el-tabs type="border-card">
            <el-tab-pane label="往期进度">
              <el-input
                  type="textarea"
                  :rows="3"
                  v-model="currentProject.previousProgress">
              </el-input>
            </el-tab-pane>
            <el-tab-pane label="本期进度">
              <el-input
                  type="textarea"
                  :rows="3"
                  v-model="currentProject.currentProgress">
              </el-input>
            </el-tab-pane>
            <el-tab-pane label="下期计划">
              <el-input
                  type="textarea"
                  :rows="3"
                  v-model="currentProject.nextPlan">
              </el-input>
            </el-tab-pane>
          </el-tabs>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveProject">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projectList: [
        {
          id: 1,
          name: '改善专项',
          target: '100',
          principal: '张1',
          status: '进行中',
          milestone: '',
          priority: '高',
          endTime: '2025-12-21 00:00:00',
          countdown: '156',
          previousProgress: '',
          currentProgress: '',
          nextPlan: ''
        },
        {
          id: 2,
          name: '改善专项1',
          target: '',
          principal: '',
          status: '',
          milestone: '',
          priority: '高',
          endTime: '2025-12-21 00:00:00',
          countdown: '156',
          previousProgress: '',
          currentProgress: '',
          nextPlan: ''
        }
      ],
      currentProject: {
        id: '',
        name: '',
        target: '',
        principal: '',
        status: '',
        milestone: '',
        priority: '',
        endTime: '',
        countdown: '',
        previousProgress: '',
        currentProgress: '',
        nextPlan: ''
      },
      dialogVisible: false,
      dialogTitle: '新增项目',
      isEdit: false
    }
  },
  methods: {
    handleAddProject() {
      this.dialogTitle = '新增项目';
      this.isEdit = false;
      this.currentProject = {
        id: Date.now(),
        name: '',
        target: '',
        principal: '',
        status: '',
        milestone: '',
        priority: '',
        endTime: '',
        countdown: '',
        previousProgress: '',
        currentProgress: '',
        nextPlan: ''
      };
      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      this.dialogTitle = '编辑项目';
      this.isEdit = true;
      this.currentProject = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除该项目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.projectList.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    saveProject() {
      if (this.isEdit) {
        const index = this.projectList.findIndex(item => item.id === this.currentProject.id);
        if (index !== -1) {
          this.$set(this.projectList, index, this.currentProject);
        }
      } else {
        this.projectList.push(this.currentProject);
      }
      this.dialogVisible = false;
      this.$message({
        message: '保存成功',
        type: 'success'
      });
    },
    handleRowClick(row) {
      console.log('点击行:', row);
    },
    getStatusType(status) {
      switch(status) {
        case '进行中': return 'primary';
        case '已完成': return 'success';
        case '已延期': return 'warning';
        default: return 'info';
      }
    }
  }
}
</script>

<style scoped>
.project-management-container {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-table {
  margin-top: 20px;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>